<template>
  <el-carousel class="carousel" arrow="always">
    <el-carousel-item
      class="carouselItem"
      v-for="(item, index) in bannerList"
      :key="'banner' + index"
    >
      <div class="bannaerItemBox" @click="toDetails(item)">
        <img
          class="bannerItem"
          :src="`${$basAssetsUrl}${item.originImg}`"
          alt=""
          srcset=""
        />
      </div>
    </el-carousel-item>
  </el-carousel>
</template>

<script>
export default {
  name: 'Banner',
  props: {
    bannerList: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {};
  },
  created() {},
  methods: {
    toDetails(item) {
      const url = this.$router.resolve({
        path: '/trainingDetails',
        query: {
          id: item.objectId
        }
      }).href;
      window.open(url, '_blank');
    },
  },
};
</script>
<style lang="scss" scoped>
.carousel {
  width: 100%;
  height: 445px;
  border-radius: 20px;
  margin: 20px 0;
  // 内容区
  ::v-deep .el-carousel__container {
    height: 100%;
    .el-carousel__arrow {
      background: rgba(255, 255, 255, 0.1);
      box-shadow: $box-shadow-secondary;
    }
  }
  // 指示器
  ::v-deep .el-carousel__indicators {
    position: absolute;
    bottom: 28px;
    .el-carousel__indicator button {
      width: 80px;
      height: 6px;
      border-radius: 2px;
      background: #fff;
      opacity: 0.4;
    }
    .el-carousel__indicator.is-active button {
      opacity: 1;
    }
  }
  .carouselItem {
    width: 100%;
    height: 100%;
    .bannaerItemBox {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      overflow: hidden;
      .bannerItem {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }
}
// @media screen and (min-width: 1441px) {
//   .carousel {
//     height: 40vw;
//   }
// }
</style>
